<template>
    <StElDynamicForm
            ref="form"
            :options="formItems"
            :origin-prop="{labelWidth: '80px'}"
            :submit-props="{useDefault: false}"
    >
        <template #buttons>
            <el-button v-bind="$stElStyleTools.aiButtonStyle('保存')" native-type="submit"
                       @click="doAdd" size="mini" :loading="submitLoading">保存
            </el-button>
            <el-button v-bind="$stElStyleTools.aiButtonStyle('重置')"
                       @click="()=> {$refs.form.resetForm()}" size="mini">重置
            </el-button>
        </template>
    </StElDynamicForm>
</template>

<script>
    import MpUrl from '../../MpUrl.js'
    export default {
        components:{
        },
        data(){
            return {
                appCode: this.$route.query.appCode,
                type: this.$route.query.type,
                submitLoading: false,
                formItems:[
                    {
                        field: {
                            name: 'file'
                        },
                        element:{
                            type: 'uploadFileRaw',
                            options: {
                                drag: true,
                                tips: '图片（image）: 10M，支持bmp/png/jpeg/jpg/gif格式\n' +
                                    '<br/>' +
                                    '语音（voice）：2M，播放长度不超过60s，mp3/wma/wav/amr格式\n' +
                                    '<br/>' +
                                    '视频（video）：10MB，支持MP4格式\n' +
                                    '<br/>' +
                                    '缩略图（thumb）：64KB，支持JPG格式'
                            },
                            required: true,
                            label: '媒体',

                        }
                    },
                    {
                        field: {
                            name: 'title'
                        },
                        element:{
                            label: '标题',
                            placeholder: '视频素材的标题',
                            required: true,
                            show: ()=>{return this.type == 'video'}
                        }
                    },
                    {
                        field: {
                            name: 'introduction'
                        },
                        element:{
                            label: '描述',
                            placeholder: '视频素材的描述',
                            required: true,
                            show: ()=>{return this.type == 'video'}
                        }
                    },

                ]
            }
        },
        mounted(){
            if(!this.appCode){
                this.$message.error('参数错误，缺少公众号编码appCode')
            }
            if(!this.type){
                this.$message.error('参数错误，缺少媒体类型type')
            }
        },
        methods:{
            addUrl() {
                if(!this.appCode || !this.type){
                    this.$message.error('参数错误，缺少公众号编码appCode或媒体类型type')
                    return false
                }
                return this.$stStringTools.replaceb(MpUrl.PermanentOtherAdd,{appCode: this.appCode,type: this.type})
            },
            doAdd() {
                let url = this.addUrl()
                if (url === false) {
                    return
                }
                // 提交表单
                this.$refs.form.getFormRef().validate((valid)=>{
                    if (valid) {
                        let oldForm = this.$refs.form.getFormData()
                        let formData = new FormData()
                        for (let key in oldForm){
                            let value = oldForm[key]
                            if(value && value.raw){
                                formData.append(key,value.raw)
                            }else{
                                formData.append(key,value)
                            }
                        }
                    this.submitLoading = true
                        this.axios.post(url,formData).then(res=>{
                            this.$message.success('保存成功')
                        }).catch(error=>{
                            if(error.response){
                                if(error.response.data && error.response.data.errorMsg){
                                    this.$message.error(error.response.data.errorMsg)
                                }
                            }else {
                                this.$message.error('网络错误或服务不可用')
                            }
                        }).finally(()=>{
                            this.submitLoading = false
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>